<template>
  <div class="box">
    <div class="list">
      <div class="k">积分兑换比例：</div>
      <div class="v">
        一元钱换<a-input
          v-model:value="changRationObj.changRatio"
          class="input-min"
          type="number"
        />积分
      </div>
      <a-button type="primary" size="small" class="button" @click="setSysRatio" ghost
        >保存</a-button
      >
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { getSysDetail, updateSys } from '@/api/sys.api'
import { message } from 'ant-design-vue'
const router = useRouter()
const changRationObj = ref({
  changRatio: 1,
})
const setSysRatio = async () => {
  const id = 'ae36a83b-352a-4334-aeac-77ade19ed817'
  const res = await updateSys(id, {
    info: {
      changRatio: changRationObj.value.changRatio,
    },
  })
  if (res.code === 200 && res.data) {
    message.success('编辑成功')
    router.go(-1)
  } else {
    message.error(res.message || '编辑失败')
  }
}
const getDetail = async () => {
  const id = 'ae36a83b-352a-4334-aeac-77ade19ed817'
  const res = await getSysDetail(id)
  if (res.code === 200 && res.data && res.data.info) {
    changRationObj.value.changRatio = res.data.info.changRatio as number
    console.log(res.data)
  }
}
onMounted(() => {
  getDetail()
})
</script>
<style lang="stylus" scoped>
.box {
  padding: 20px;
  box-sizing: border-box;
  background: #F9FAFB;
  border-radius: 4px;
}
.list {
  display: flex;
  align-items: center;
  padding 20px 0
}
.list .k {
  width 100px
}
.input-min{
  width 100px
  margin 0 10px
}
.button{
  margin 0 10px
}
</style>
